import { FC, useCallback, useEffect } from 'react';
import { Result, Button } from 'antd';
import { useNavigate } from 'react-router-dom';
import { observer, useLocalStore } from 'mobx-react';

import { globalStore } from '@/stores/global';

const UnAuthorizationPage: FC = () => {
  const global = useLocalStore(() => globalStore);

  const navigate = useNavigate();

  useEffect(() => {
    // 回到无权限页时清空所有storage并执行登出
    global.logoutUnAuthorize();
  }, []);

  const handleToLogin = useCallback(() => {
    navigate('/oauth/login', { replace: true });
  }, []);

  return (
    <>
      <Result
        status="warning"
        title="抱歉, 您未登录或身份认证已失效, 请点击下方按钮重新登录！"
        style={{ paddingTop: '10rem' }}
        extra={
          <Button type="primary" key="console" style={{ width: '10rem' }} onClick={handleToLogin}>
            重新登录
          </Button>
        }
      />
    </>
  );
};

export default observer(UnAuthorizationPage);
